<!--  -->
<template>
  <div class="profile-container">
    <!-- 头部导航 -->
    <van-nav-bar
      title="个人中心"
      fixed
      :z-index="999"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      :border="false"
    >
      <template #left>
        <van-icon name="setting-o" color="#ffffff" size="24" />
      </template>
      <template #right>
        <van-badge :content="5">
          <van-icon name="chat-o" size="24" color="#ffffff" />
        </van-badge>
      </template>
    </van-nav-bar>
    <!-- 头部 -->
    <div class="header">
      <div class="header-main">
        <template v-if="userInfo">
          <img class="user-avatar" :src="userInfo.avatarUrl" alt="用户头像" />
          <div class="user-name">{{ userInfo.username }}</div>
        </template>
        <template v-else>
          <img
            class="user-avatar"
            src="../../assets/images/unlogin.png"
            alt="用户头像"
          />
          <div class="user-name">未登录</div>
        </template>
      </div>
    </div>
    <!-- 订单栏 -->
    <div class="order-bar">
      <div class="order-header" @click="toMyOrder(0)">
        <div class="title">我的订单</div>
        <div class="all-order">
          <span>全部订单</span>
          <van-icon name="arrow" size="16"></van-icon>
        </div>
      </div>
      <div class="order-content">
        <ul>
          <li @click="toMyOrder(1)">
            <img src="../../assets/images/fukuan.png" alt="待付款" />
            <span>待付款</span>
          </li>
          <li @click="toMyOrder(2)">
            <img src="../../assets/images/fahuo.png" alt="待发货" />
            <span>待发货</span>
          </li>
          <li @click="toMyOrder(3)">
            <img src="../../assets/images/shouhuo.png" alt="待收货" />
            <span>待收货</span>
          </li>
          <li @click="toMyOrder(4)">
            <img src="../../assets/images/pingjia.png" alt="待评价" />
            <span>待评价</span>
          </li>
          <li>
            <img src="../../assets/images/tuikuan.png" alt="退款" />
            <span>退款管理</span>
          </li>
        </ul>
      </div>
    </div>
    <!-- 分割线 -->
    <divider></divider>
    <!-- 关于我的一些信息 -->
    <div class="profile-info">
      <ul>
        <li>
          <div class="left">
            <img src="../../assets/images/shoucang.png" alt="收藏图标" />
          </div>
          <div class="right">
            <span>我的收藏</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../../assets/images/youhui.png" alt="优惠券图标" />
          </div>
          <div class="right">
            <span>我的优惠券</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../../assets/images/jifen.png" alt="积分图标" />
          </div>
          <div class="right">
            <span>我的积分</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
      </ul>
      <divider />
      <ul>
        <li>
          <div class="left">
            <img src="../../assets/images/vip.png" alt="VIP图标" />
          </div>
          <div class="right">
            <span>加入超级vip</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
      </ul>
      <divider />
      <ul>
        <li>
          <div class="left">
            <img src="../../assets/images/help.png" alt="帮助图标" />
          </div>
          <div class="right">
            <span>帮助中心</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../../assets/images/kefu.png" alt="客服图标" />
          </div>
          <div class="right">
            <span>联系客服</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
        <li>
          <div class="left">
            <img src="../../assets/images/shangjia.png" alt="商家图标" />
          </div>
          <div class="right">
            <span>商家入驻</span>
            <van-icon name="arrow" size="16"></van-icon>
          </div>
        </li>
      </ul>
    </div>
    <!-- 底部导航 -->
    <!-- 底部tabbar -->
    <tabbar></tabbar>
  </div>
</template>

<script>
import { NavBar, Icon, Badge } from "vant";
import tabbar from "@/components/tabbar/tabbar";
import divider from "@/components/common/divider";
export default {
  data() {
    return {
      userInfo: null,
    };
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    const userInfo = JSON.parse(localStorage.getItem("userInfo"));
    this.userInfo = userInfo;
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    // console.log(this.$el)
  },
  methods: {
    onClickLeft() {
      this.$router.push({ name: "Setting" });
    },
    onClickRight() {},
    //点击去我的订单页
    toMyOrder(index) {
      this.$router.push({ name: "MyOrder", query: { index } });
    },
  },
  components: {
    [NavBar.name]: NavBar,
    [Icon.name]: Icon,
    [Badge.name]: Badge,
    tabbar,
    divider,
  },
  computed: {},
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (!vm.userInfo) {
        //去登录欢迎页
        vm.$router.push({ name: "Welcome" });
      }
    });
  },
};
</script>
<style scoped>
.profile-container {
  padding-top: 46px;
  padding-bottom: 56px;
  font-size: 16px;
  background-color: #fff;
}
.profile-container >>> .van-nav-bar {
  border-bottom: 1px solid #ff6a00;
  background-color: #ff6a00;
}
.profile-container >>> .van-nav-bar__title {
  color: #fff;
  font-size: 18px;
}
.van-nav-bar .icon {
  color: #fff;
  font-size: 18px;
  font-weight: bold;
}
/* 头部 */
.profile-container .header {
  height: 150px;
  color: #fff;
  background-color: #ff6a00;
}
.profile-container .header-main {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.profile-container >>> .van-badge--fixed {
  top: 4px;
}
.profile-container .user-avatar {
  width: 66px;
  height: 66px;
  border-radius: 50%;
}
.profile-container .user-name {
  margin-top: 20px;
}
/* 订单栏 */
.order-bar .order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
}
.order-bar .order-header .all-order {
  color: #aaa;
  font-size: 14px;
}
.order-bar .order-header .van-icon {
  top: 2px;
  margin-left: 4px;
}
.order-content ul {
  display: flex;
}
.order-content ul li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 20%;
}
.order-content ul li img {
  width: 32px;
  height: 32px;
  margin: 6px 0;
}
.order-content ul li span {
  font-size: 14px;
  margin-bottom: 6px;
}
/* 个人信息 */
.profile-info ul {
  padding: 0 10px;
}
.profile-info ul li {
  display: flex;
  align-items: center;
}
.profile-info ul li .left {
  margin-right: 10px;
}
.profile-info ul li img {
  width: 24px;
  height: 24px;
}
.profile-info ul li .right {
  flex: 1;
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.profile-info ul li .right .van-icon {
  top: 2px;
  color: #ccc;
}
</style>